// margin padding class
// e.g. mb-1 mt-3 pr-5
$spacer: 0.25rem !default;
@each $prop, $abbrev in (margin: m, padding: p) {
  @for $size from 0 through 20 {
    // normal
    .#{$abbrev}t-#{$size} {
      #{$prop}-top: #{$size * $spacer};
    }

    .#{$abbrev}r-#{$size} {
      #{$prop}-right: #{$size * $spacer};
    }

    .#{$abbrev}b-#{$size} {
      #{$prop}-bottom: #{$size * $spacer};
    }

    .#{$abbrev}l-#{$size} {
      #{$prop}-left: #{$size * $spacer};
    }

    .#{$abbrev}x-#{$size} {
      #{$prop}-left: #{$size * $spacer};
      #{$prop}-right: #{$size * $spacer};
    }

    .#{$abbrev}y-#{$size} {
      #{$prop}-top: #{$size * $spacer};
      #{$prop}-bottom: #{$size * $spacer};
    }

    .#{$abbrev}-#{$size} {
      #{$prop}: #{$size * $spacer};
    }

    // important
    .#{$abbrev}t-#{$size}-imp {
      #{$prop}-top: #{$size * $spacer} !important;
    }

    .#{$abbrev}r-#{$size}-imp {
      #{$prop}-right: #{$size * $spacer} !important;
    }

    .#{$abbrev}b-#{$size}-imp {
      #{$prop}-bottom: #{$size * $spacer} !important;
    }

    .#{$abbrev}l-#{$size}-imp {
      #{$prop}-left: #{$size * $spacer} !important;
    }

    .#{$abbrev}x-#{$size}-imp {
      #{$prop}-left: #{$size * $spacer} !important;
      #{$prop}-right: #{$size * $spacer} !important;
    }

    .#{$abbrev}y-#{$size}-imp {
      #{$prop}-top: #{$size * $spacer} !important;
      #{$prop}-bottom: #{$size * $spacer} !important;
    }

    .#{$abbrev}-#{$size}-imp {
      #{$prop}: #{$size * $spacer} !important;
    }
  }

  .#{$abbrev}x-auto {
    #{$prop}-left: auto;
    #{$prop}-right: auto;
  }
  .#{$abbrev}y-auto {
    #{$prop}-top: auto;
    #{$prop}-bottom: auto;
  }
  .#{$abbrev}-auto {
    #{$prop}: auto;
  }
}

// custom css class
.direction {
  &-ltr {
    direction: ltr;
  }

  &-rtl {
    direction: rtl;
  }
}

.text {
  &-left {
    text-align: left;
  }

  &-center {
    text-align: center;
  }

  &-right {
    text-align: right;
  }
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.none {
  display: none;
}
